<template>
  <div class="dashboard-container">
    <!-- 添加加载效果 -->
    <div class="loading-overlay" v-if="isLoading">
      <div class="loading-spinner"></div>
      <div class="loading-text">数据加载中...</div>
    </div>

    <div class="tech-bg">
      <div class="grid-lines"></div>
      <div class="glow-effect"></div>
    </div>

    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="title">
        <h1>车辆数据监控大屏</h1>
      </div>
      <div class="header-right">
        <div class="time">{{ currentTime }}</div>
        <div class="fullscreen-btn" @click="toggleFullscreen">
          <i class="icon-fullscreen"></i>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 左侧信息区 -->
      <div class="left-panel">
        <div class="info-card">
          <div class="card-title">
            <span class="title-text">基本信息</span>
            <span class="title-line"></span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">品牌：</span>
              <span class="value">{{ carInfo.trademark }}</span>
            </div>
            <div class="info-item">
              <span class="label">厂商：</span>
              <span class="value">{{ carInfo.company }}</span>
            </div>
            <div class="info-item">
              <span class="label">动力类型：</span>
              <span class="value">{{ carInfo.powerType }}</span>
            </div>
            <div class="info-item">
              <span class="label">充电类型：</span>
              <span class="value">{{ carInfo.chargeType }}</span>
            </div>
          </div>
        </div>

        <div class="status-card">
          <div class="card-title">
            <span class="title-text">运行状态</span>
            <span class="title-line"></span>
          </div>
          <div class="status-content">
            <div class="status-item">
              <div class="status-value">
                <span class="number">{{ running.battery }}</span>
                <span class="unit">%</span>
              </div>
              <div class="status-label">电池电量</div>
              <div class="status-progress">
                <div
                  class="progress-bar"
                  :style="{ width: running.battery + '%' }"
                ></div>
              </div>
            </div>
            <div class="status-item">
              <div class="status-value">
                <span class="number">{{ running.speed }}</span>
                <span class="unit">km/h</span>
              </div>
              <div class="status-label">当前速度</div>
              <div class="status-progress">
                <div
                  class="progress-bar"
                  :style="{ width: (running.speed / 200) * 100 + '%' }"
                ></div>
              </div>
            </div>
            <div class="status-item">
              <div class="status-value">
                <span
                  class="status-dot"
                  :class="{ running: running.status === '正常' }"
                ></span>
                <span class="status-text">{{ running.status }}</span>
              </div>
              <div class="status-label">运行状态</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间图表区 -->
      <div class="center-panel">
        <div class="chart-card">
          <div class="card-title">
            <span class="title-text">速度趋势</span>
            <span class="title-line"></span>
          </div>
          <div class="chart" ref="speedChart"></div>
        </div>
        <div class="chart-card">
          <div class="card-title">
            <span class="title-text">里程消耗</span>
            <span class="title-line"></span>
          </div>
          <div class="chart" ref="mileageChart"></div>
        </div>
      </div>

      <!-- 右侧图表区 -->
      <div class="right-panel">
        <div class="chart-card">
          <div class="card-title">
            <span class="title-text">温度分布</span>
            <span class="title-line"></span>
          </div>
          <div class="chart" ref="statusChart"></div>
        </div>
        <div class="alert-card">
          <div class="card-title">
            <span class="title-text">告警信息</span>
            <span class="title-line"></span>
          </div>
          <div class="alert-content">
            <div
              class="alert-item"
              :class="{ 'level-1': errorData.l1AlarmCount > 0 }"
            >
              <div class="alert-icon">
                <i class="alert-icon-1"></i>
              </div>
              <div class="alert-info">
                <div class="alert-title">一级告警</div>
                <div class="alert-count">
                  {{ errorData.l1AlarmCount || 0 }}次
                </div>
              </div>
            </div>
            <div
              class="alert-item"
              :class="{ 'level-2': errorData.l2AlarmCount > 0 }"
            >
              <div class="alert-icon">
                <i class="alert-icon-2"></i>
              </div>
              <div class="alert-info">
                <div class="alert-title">二级告警</div>
                <div class="alert-count">
                  {{ errorData.l2AlarmCount || 0 }}次
                </div>
              </div>
            </div>
            <div
              class="alert-item"
              :class="{ 'level-3': errorData.l3AlarmCount > 0 }"
            >
              <div class="alert-icon">
                <i class="alert-icon-3"></i>
              </div>
              <div class="alert-info">
                <div class="alert-title">三级告警</div>
                <div class="alert-count">
                  {{ errorData.l3AlarmCount || 0 }}次
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import { updateTime, toggleFullscreen } from "@/utils/index";
import { useRoute } from "vue-router";
import * as echarts from "echarts";
import { useCarStore } from "@/stores/dataStore";
import { storeToRefs } from "pinia";
const carStore = useCarStore();
const {
  carInfo,
  running,
  errorData,
  speedData,
  mileageConsumeData,
  temperatureData,
} = storeToRefs(carStore);
const { InitCarDetailData,getDbSpeedData } = carStore;

const route = useRoute();
const speedChart = ref(null);
const mileageChart = ref(null);
const statusChart = ref(null);
const currentTime = ref("");

// 数据状态
const mileageData = ref({});
const statusData = ref({});

// 声明图表实例变量
const speedChartInstance = ref(null);
const mileageChartInstance = ref(null);
const statusChartInstance = ref(null);

// 添加加载状态变量
const isLoading = ref(true);

// 添加定时器变量
const speedDataTimer = ref(null);

// 添加状态来跟踪是否查看最新数据
const isViewingLatest = ref(true);

const mileageConsumeChartData = computed(() => {
  const data = mileageConsumeData.value
    .slice(0, 7)
    .sort((a, b) => new Date(a.day) - new Date(b.day));
  return {
    xData: data.map((item) => item.day),
    yData: data.map((item) => item.avgEnergyConsumption),
  };
});

// 将 speedChartData 提升到 initCharts 之外
const speedChartData = computed(() => {
  // 按时间排序所有数据
  const sortedData = [...speedData.value].sort((a, b) => new Date(a.times) - new Date(b.times));
  
  return {
    xData: sortedData.map((item) => {
      // 通过空格切片，只保留时间部分
      const timeParts = item.times.split(" ");
      return timeParts.length > 1 ? timeParts[1] : item.times;
    }),
    yData: sortedData.map((item) => item.velocity), // 使用 velocity 作为 y 轴数据
  };
});

// 修改 handleDataZoomChange 函数
const handleDataZoomChange = (params) => {
  if (speedChartInstance.value) {
    const chartData = speedChartData.value;
    // 更新是否查看最新数据的状态
    isViewingLatest.value = params.end === 100;
    
    // 强制更新图表数据和样式
    speedChartInstance.value.setOption({
      xAxis: {
        data: chartData.xData,
      },
      series: [
        {
          name: "速度",
          data: chartData.yData,
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(0, 242, 254, 0.3)" },
              { offset: 1, color: "rgba(0, 242, 254, 0.1)" },
            ]),
          },
          lineStyle: {
            color: "#00f2fe",
            width: 3,
          },
          itemStyle: {
            color: "#00f2fe",
            borderColor: "#fff",
            borderWidth: 2,
          },
        }
      ],
      dataZoom: [
        {
          start: params.start,
          end: params.end
        },
        {
          start: params.start,
          end: params.end
        }
      ]
    }, false);
  }
};

// 初始化图表
const initCharts = () => {
  // 速度趋势图
  speedChartInstance.value = echarts.init(speedChart.value);

  speedChartInstance.value.setOption({
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0, 0, 0, 0.8)",
      borderColor: "#00f2fe",
      textStyle: {
        color: "#fff",
      },
      formatter: "{b}<br/>{a}: {c} km/h",
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "5%",
      bottom: "15%",
      containLabel: true,
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        start: 80,
        end: 100,
        borderColor: "#00f2fe",
        textStyle: {
          color: "#fff"
        },
        backgroundColor: "rgba(0, 242, 254, 0.1)",
        fillerColor: "rgba(0, 242, 254, 0.2)",
        handleStyle: {
          color: "#00f2fe"
        }
      },
      {
        type: 'inside',
        xAxisIndex: [0],
        start: 80,
        end: 100
      }
    ],
    xAxis: {
      type: "category",
      data: speedChartData.value.xData,
      axisLine: {
        lineStyle: {
          color: "#00f2fe",
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12,
        rotate: 45
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "速度(km/h)",
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
      },
      axisLine: {
        lineStyle: {
          color: "#00f2fe",
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(0, 242, 254, 0.1)",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "速度",
        data: speedChartData.value.yData,
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(0, 242, 254, 0.3)" },
            { offset: 1, color: "rgba(0, 242, 254, 0.1)" },
          ]),
        },
        lineStyle: {
          color: "#00f2fe",
          width: 3,
        },
        itemStyle: {
          color: "#00f2fe",
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
    ],
  });

  // 添加数据缩放事件监听
  speedChartInstance.value.on('datazoom', handleDataZoomChange);

  // 里程消耗图
  mileageChartInstance.value = echarts.init(mileageChart.value);

  mileageChartInstance.value.setOption({
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(0, 0, 0, 0.8)",
      borderColor: "#00f2fe",
      textStyle: {
        color: "#fff",
      },
      formatter: "{b}<br/>{a}: {c} kWh/100km",
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "5%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: mileageConsumeChartData.value.xData,
      axisLine: {
        lineStyle: {
          color: "#00f2fe",
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "平均能耗(kWh/100km)",
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
      },
      axisLine: {
        lineStyle: {
          color: "#00f2fe",
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(0, 242, 254, 0.1)",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "平均能耗",
        data: mileageConsumeChartData.value.yData,
        type: "bar",
        barWidth: "30%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#00f2fe" },
            { offset: 1, color: "#4facfe" },
          ]),
          borderRadius: [4, 4, 0, 0],
        },
      },
    ],
  });

  // 确保在 nextTick 中初始化图表
  nextTick(() => {
    // 温度分布饼图
    statusChartInstance.value = echarts.init(statusChart.value);

    statusChartInstance.value.setOption({
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00f2fe",
        textStyle: {
          color: "#fff",
        },
        formatter: "{d}%",
      },
      series: [
        {
          name: "温度分布",
          type: "pie",
          radius: ["30%", "60%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "transparent",
            borderWidth: 0,
          },
          label: {
            show: false,
            position: "center",
            formatter: "{name}\n{value}°C",
            fontSize: 14,
            fontWeight: "bold",
            color: "#fff",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: "bold",
              formatter: "{b}\n{c}°C",
              color: "#fff",
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 242, 254, 0.5)",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: temperatureData.value[0].avgMotorControllerTemperature,
              name: "平均电机控制器温度",
            },
            {
              value: temperatureData.value[0].avgMotorTemperature,
              name: "平均电机温度",
            },
            {
              value: temperatureData.value[0].maxBatteryTemperature,
              name: "最大电池温度",
            },
            {
              value: temperatureData.value[0].maxMotorControllerTemperature,
              name: "最大电机控制器温度",
            },
            {
              value: temperatureData.value[0].maxMotorTemperature,
              name: "最大电机温度",
            },
          ],
          itemStyle: {
            color: function (params) {
              const colorList = [
                "#ff4757",
                "#ffa500",
                "#4facfe",
                "#00ff00",
                "#ffbb33",
              ];
              return colorList[params.dataIndex];
            },
          },
        },
      ],
    });
  });

  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    speedChartInstance.value.resize();
    mileageChartInstance.value.resize();
    statusChartInstance.value.resize();
  });
};

// 在数据加载完成后更新图表
const updateCharts = () => {
  if (speedChartInstance.value) {
    const chartData = speedChartData.value;
    speedChartInstance.value.setOption({
      xAxis: {
        data: chartData.xData,
      },
      series: [
        {
          name: "速度",
          data: chartData.yData,
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(0, 242, 254, 0.3)" },
              { offset: 1, color: "rgba(0, 242, 254, 0.1)" },
            ]),
          },
          lineStyle: {
            color: "#00f2fe",
            width: 3,
          },
          itemStyle: {
            color: "#00f2fe",
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
      ],
    });
  }

  if (mileageChartInstance.value) {
    mileageChartInstance.value.setOption({
      xAxis: {
        data: mileageConsumeChartData.value.xData,
      },
      series: [
        {
          data: mileageConsumeChartData.value.yData,
        },
      ],
    });
  }

  if (statusChartInstance.value) {
    statusChartInstance.value.setOption({
      series: [
        {
          data: temperatureData.value,
        },
      ],
    });
  }
};

// 加载所有数据
const loadAllData = async () => {
  initCharts();
  updateCharts();
  isLoading.value = false;

  speedDataTimer.value = setInterval(async () => {
    await getDbSpeedData(route.params.vin);
    
    if (speedChartInstance.value) {
      const chartData = speedChartData.value;
      const currentOption = speedChartInstance.value.getOption();
      const dataZoomStart = currentOption.dataZoom[0].start;
      const dataZoomEnd = currentOption.dataZoom[0].end;

      const updateOption = {
        xAxis: {
          data: chartData.xData,
        },
        series: [
          {
            name: "速度",
            data: chartData.yData,
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 8,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(0, 242, 254, 0.3)" },
                { offset: 1, color: "rgba(0, 242, 254, 0.1)" },
              ]),
            },
            lineStyle: {
              color: "#00f2fe",
              width: 3,
            },
            itemStyle: {
              color: "#00f2fe",
              borderColor: "#fff",
              borderWidth: 2,
            },
          }
        ]
      };

      if (isViewingLatest.value) {
        updateOption.dataZoom = [
          {
            start: 80,
            end: 100
          },
          {
            start: 80,
            end: 100
          }
        ];
      } else {
        updateOption.dataZoom = [
          {
            start: dataZoomStart,
            end: dataZoomEnd
          },
          {
            start: dataZoomStart,
            end: dataZoomEnd
          }
        ];
      }

      speedChartInstance.value.setOption(updateOption, false);
    }
  }, 3000);
};

onMounted(async () => {
  // 初始化数据
  await InitCarDetailData(route.params.vin);
  currentTime.value = updateTime();
  setInterval(() => {
    currentTime.value = updateTime();
  }, 1000);
  // 确保在 DOM 元素挂载后初始化图表
  nextTick(() => {
    loadAllData();
  });
});

onUnmounted(() => {
  if (speedDataTimer.value) {
    clearInterval(speedDataTimer.value);
  }
  if (speedChartInstance.value) {
    speedChartInstance.value.off('datazoom', handleDataZoomChange);
  }
  window.removeEventListener("resize", () => {});
});
</script>

<style scoped>
.dashboard-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Arial", sans-serif;
}

.tech-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 50% 50%,
      rgba(0, 100, 255, 0.1) 0%,
      transparent 50%
    ),
    linear-gradient(45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  z-index: 1;
}

.grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 242, 254, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 242, 254, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

.glow-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 242, 254, 0.2) 0%,
    transparent 70%
  );
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

.header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(0, 242, 254, 0.2);
  height: 50px;
}

.title h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0;
  background: linear-gradient(45deg, #00f2fe, #4facfe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

.subtitle {
  color: #00f2fe;
  font-size: 1rem;
  margin-top: 5px;
  text-shadow: 0 0 5px rgba(0, 242, 254, 0.5);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.time {
  color: #00f2fe;
  font-size: 1.2rem;
  font-family: "Digital", monospace;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

.fullscreen-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.fullscreen-btn:hover {
  background: rgba(0, 242, 254, 0.1);
  transform: scale(1.1);
}

.icon-fullscreen {
  width: 20px;
  height: 20px;
  position: relative;
}

.icon-fullscreen::before,
.icon-fullscreen::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  transition: all 0.3s ease;
}

.icon-fullscreen::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.icon-fullscreen::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.fullscreen-btn:hover .icon-fullscreen::before {
  transform: translate(-2px, -2px);
}

.fullscreen-btn:hover .icon-fullscreen::after {
  transform: translate(2px, 2px);
}

/* 全屏状态下的图标样式 */
:fullscreen .icon-fullscreen::before {
  top: 2px;
  left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

:fullscreen .icon-fullscreen::after {
  bottom: 2px;
  right: 2px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
}

:fullscreen .fullscreen-btn:hover .icon-fullscreen::before {
  transform: translate(2px, 2px);
}

:fullscreen .fullscreen-btn:hover .icon-fullscreen::after {
  transform: translate(-2px, -2px);
}

.main-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 10px;
  height: calc(100% - 60px);
  padding: 5px;
  box-sizing: border-box;
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

.center-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

.info-card,
.status-card,
.alert-card,
.chart-card {
  background: rgba(10, 10, 42, 0.8);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 100, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.left-panel > div,
.right-panel > div {
  height: calc(50% - 5px);
  min-height: 0;
}

.center-panel > div {
  height: calc(50% - 5px);
  min-height: 0;
}

.info-card::before,
.status-card::before,
.chart-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(0, 242, 254, 0.1),
    transparent
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.info-card:hover,
.status-card:hover,
.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 30px rgba(0, 100, 255, 0.4);
}

.card-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  flex-shrink: 0;
}

.title-text {
  color: #00f2fe;
  font-size: 1.1rem;
  margin-right: 10px;
  text-shadow: 0 0 5px rgba(0, 242, 254, 0.5);
}

.title-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.3), transparent);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  height: calc(100% - 40px);
  flex: 1;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background: rgba(0, 242, 254, 0.05);
  border-radius: 5px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: rgba(0, 242, 254, 0.1);
  transform: translateX(5px);
}

.label {
  color: #4facfe;
  width: 100px;
}

.value {
  color: #fff;
  font-weight: 500;
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: calc(100% - 40px);
  flex: 1;
}

.status-item {
  background: rgba(0, 242, 254, 0.05);
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.status-item:hover {
  background: rgba(0, 242, 254, 0.1);
  transform: translateX(5px);
}

.status-value {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}

.number {
  font-size: 1.8rem;
  font-weight: bold;
  color: #00f2fe;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

.unit {
  font-size: 0.9rem;
  color: #4facfe;
  margin-left: 5px;
}

.status-label {
  color: #aaa;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.status-progress {
  height: 4px;
  background: rgba(0, 242, 254, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-dot.running {
  background: #00ff00;
  box-shadow: 0 0 10px #00ff00;
}

.status-text {
  color: #00f2fe;
  font-weight: 500;
}

.chart {
  height: calc(100% - 40px);
  width: 100%;
  min-height: 200px;
  flex: 1;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 242, 254, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 254, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 242, 254, 0.5);
}

/* 响应式布局 */
@media screen and (max-width: 1600px) {
  .main-content {
    grid-template-columns: 280px 1fr 280px;
  }
}

@media screen and (max-width: 1400px) {
  .main-content {
    grid-template-columns: 250px 1fr 250px;
  }

  .title h1 {
    font-size: 1.8rem;
  }

  .time {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 1200px) {
  .main-content {
    grid-template-columns: 220px 1fr 220px;
  }
}

.alert-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100% - 40px);
  flex: 1;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(0, 242, 254, 0.05);
  border-radius: 5px;
  transition: all 0.3s ease;
}

.alert-item:hover {
  background: rgba(0, 242, 254, 0.1);
  transform: translateX(5px);
}

.alert-item.level-1 {
  border-left: 3px solid #4facfe;
}

.alert-item.level-2 {
  border-left: 3px solid #ffbb33;
}

.alert-item.level-3 {
  border-left: 3px solid #ff4757;
}

.alert-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.alert-icon i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.alert-icon-1 {
  background: #4facfe;
  box-shadow: 0 0 10px #4facfe;
}

.alert-icon-2 {
  background: #ffbb33;
  box-shadow: 0 0 10px #ffbb33;
}

.alert-icon-3 {
  background: #ff4757;
  box-shadow: 0 0 10px #ff4757;
}

.alert-info {
  flex: 1;
}

.alert-title {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 5px;
}

.alert-count {
  font-size: 18px;
  font-weight: bold;
  color: #00f2fe;
}

/* 添加加载效果样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(0, 242, 254, 0.1);
  border-radius: 50%;
  border-top: 4px solid #00f2fe;
  animation: spin 1.5s linear infinite;
  margin-bottom: 20px;
}

.loading-text {
  color: #00f2fe;
  font-size: 1.2rem;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
  letter-spacing: 2px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
